import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

import Home from '@/views/home/index.vue'
import Kind from '@/views/kind/index.vue'
import Cart from '@/views/cart/index.vue'
import User from '@/views/user/index.vue'

import Footer from '@/components/Footer.vue'

const routes = [
  // redirect 路由重定向
  {
    path: '/',
    // 当访问 / 的时候将路径改到 /home
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    meta: {
      title: '嗨购-首页'
    },
    // component: Home
    components: {
      // 通过命名视图的方式配置页脚
      default: Home,
      footer: Footer
    }
  },
  {
    path: '/kind',
    name: 'kind',
    meta: {
      title: '嗨购-分类'
    },
    // component: Kind
    components: {
      default: Kind,
      footer: Footer
    }
  },
  {
    path: '/cart',
    name: 'cart',
    meta: {
      title: '嗨购-购物车'
    },
    // component: Cart
    components: {
      default: Cart,
      footer: Footer
    }
  },
  {
    path: '/user',
    name: 'user',
    meta: {
      title: '嗨购-用户'
    },
    // component: User
    components: {
      default: User,
      footer: Footer
    }
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      // 配置路由的元信息
      hidden: true,
      title: '嗨购-登录'
    },
    component: ()=> import('../views/login/index.vue')
  },{
    path: '/register',
    name: 'register',
    meta: {
      // 配置路由的元信息
      hidden: true,
      title: '嗨购-注册'
    },
    component: ()=> import('../views/register/index.vue'),
    // 路由重定向，默认打开第一个注册页面
    redirect: '/register/step1',
    children: [
      {
        path: 'step1',
        name: 'step1',
        component: ()=> import('../views/register/step1.vue'),
      },
      {
        path: 'step2',
        name: 'step2',
        component: ()=> import('../views/register/step2.vue'),
      },
      {
        path: 'step3',
        name: 'step3',
        component: ()=> import('../views/register/step3.vue'),
      }
    ]
  },{
    // 定义动态路由
    // path: '/detail/:proid',
    path: '/detail',
    name: 'detail',
    meta: {
       // 配置路由的元信息
       hidden: true,
       title: '详情'
    },
    component: ()=> import('@/views/detail/index.vue'),
    beforeEnter: (to: any, from: any) => {
      // 只有进入到该路由的时候才会执行钩子，叫独享守卫
      //
      // reject the navigation
      // return false
    },
  },
  {
    // 配置 404 页面
    // vue2 中  /*
    path: '/:pathMatch(.*)*',
    component: ()=> import('@/views/error/index.vue'),
    meta: {
      hidden: true
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

/*
  路由守卫
    全局守卫：
      前置守卫：路由跳转之前要做的事情，比如验证用户是否登录
      解析守卫：捕获错误信息用的
      后置守卫：跳转之后做的事情
    独享守卫：
      beforeEnter 将路由守卫配置在路由的规则中，也就是只有进入该路由才会
      触发的守卫，叫做独享守卫
    组件内的守卫
      选项式API：
        beforeRouteEnter  进入
        beforeRouteUpdate 更新
        beforeRouteLeave  离开
      组合式API：
        onBeforeRouteLeave  离开
        onBeforeRouteUpdate 更新
*/


// 路由的全局前置守卫
router.beforeEach((to, from, next) => {
  // console.log(to.path == '/cart');
  /*
    to: 去哪里 即将要进入的目标 用一种标准化的方式
    from: 从哪里来 当前导航正要离开的路由 用一种标准化的方式
  */
  // ...
  // 返回 false 以取消导航，取消导航就是取消页面跳转
  // return  false

  if(to.path == '/cart' || to.path == '/user'){
    // 要进入购物车页面
    if(localStorage.getItem('loginState') != 'true'){
      // 用户没有登录
      // 让用户跳转到登录页面
      next('/login')
    }else {
      // 用户已经登录
      next()
    }
  }else {
    next()
  }


})

// 全局解析守卫
// router.beforeResolve(async to => {
//   if (to.meta.requiresCamera) {
//     try {
//       await askForCameraPermission()
//     } catch (error) {
//       if (error instanceof NotAllowedError) {
//         // ... 处理错误，然后取消导航
//         return false
//       } else {
//         // 意料之外的错误，取消导航并把错误传给全局处理器
//         throw error
//       }
//     }
//   }
// })

// 路由的后置守卫
// 跳转到路由之后调用该函数
router.afterEach((to, from) => {
  // 跳转到路由之后可以将标题设置一下
  document.title = String(to.meta.title)
})

export default router
